import React, { Component, Fragment } from "react";
// router
import { Link } from "react-router-dom";
// antd
import { Button, Tag } from "antd";
import Action from "@c/buttonAction/Index";
// table 组件
import TableComponent from "@c/tableData/Index";
import GroupModal from "./components/GroupModal";
// Store
import Store from "@/stroe/Index";
// action
import { addStatus } from "@/stroe/action/Config";
import "./index.scss";

class GroupList extends Component {
    constructor(props){
        super(props);
        this.state = {
            // id
            id: "",
            // 表头
            tableConfig: {
                url: "groupAvatarList",
                url_del: "groupList",
                method: "get",
                checkbox: true,
                thead: [
                    { 
                        title: "群组名称", 
                        dataIndex: "group_name", 
                        key: "group_name",
                        render: (group_name, rowData) => {
                            return (
                                <Link to={{ pathname: '/index/galaxy/groupdetails/'+rowData.id, 
                                            state:{ group_id: rowData.id }}}>{group_name}
                                </Link>
                            )
                        }
                    },
                    { title: "GID", dataIndex: "gid", key: "gid" },
                    { 
                        title: "标签", 
                        dataIndex: "tag", 
                        key: "tag",
                        render: (rowData => {
                            console.log('tag=====>', rowData)
                            return (
                                rowData ?
                                <div>
                                    {
                                    rowData.map(tag => (
                                        <Tag key={tag}>{tag}</Tag>
                                    ))
                                    }
                                </div> : <div></div>
                            )
                        })
                    },
                    { 
                        title: "机器数量", 
                        dataIndex: "machine_count", 
                        key: "machine_count",
                        render: (machine_count => {
                            return (
                                <div className='machine_count' >
                                    <p>{machine_count}</p>
                                </div>
                            )
                        })
                    },
                    { 
                        title: "机器信息", 
                        dataIndex: "service", 
                        key: "service",
                        style: { width: '100px', overflow: 'auto'},
                        render: (rowData => {
                            console.log(rowData)
                            return (
                                <div>
                                    {
                                      rowData.map(service => (
                                          
                                            <div>
                                                <tr>{service.service_code}</tr>
                                                
                                                {service.machine_list.map(machine =>(
                                                    <tr>&nbsp;&nbsp;{machine}</tr>
                                                    ))
                                                }
                                            </div>
                                        
                                      ))
                                    }
                                </div>
                            )
                        })
                    },
                    { 
                        title: "管理", 
                        dataIndex: "manage", 
                        key: "manage", 
                        width: 215,
                        render: (text, rowData) => {
                            return (
                                <div className="inline-button">
                                    <Action>
                                        <Action.Button onClick={() => this.groupDetail({ group_id: rowData.id })}>详情</Action.Button>
                                        <Action.Button onClick={() => this.delete(rowData.id)}>删除</Action.Button>
                                    </Action>
                                </div>
                            )
                        }
                    }
                ],
                formItem: [
                    { 
                        type: "Input",
                        label: "GID", 
                        name: "gid", 
                        placeholder: "请输入GID"
                    },
                    { 
                        type: "Input",
                        label: "IP", 
                        name: "ip", 
                        placeholder: "请输入IP"
                    }
                ]
            },
            // 表的数据
            data: []
        };
    }
    /** 生命周期挂载完成 */
    componentDidMount(){
        Store.subscribe(() =>
            console.log(Store.getState())
        );

        Store.dispatch(addStatus({
            label: "Centos7",
            value: "centos7"
        }))

        // Store.dispatch(uploadStatus("aaaaa", false))
    }
    // 获取子组件实例
    getChildRef = (ref) => {
        this.tableComponent = ref; // 存储子组件
    }

    // 获取弹窗子组件实例
    getGroupModalRef = (ref) => { this.child = ref }

    // 跳转详情页
    groupDetail = (data) => {
        console.log(data)
        const group_id = data.group_id;
        this.props.history.push({ 
            pathname: `/index/galaxy/groupdetails/${group_id}`, 
            state: data // state传多个参数
        })
    }

    // 显示弹窗
    groupModal = (data) => {
        console.log(data)
        this.child.visibleModal(data);
    }

    /** 删除 */
    delete = (id) => {
        this.tableComponent.onHandlerDelete(id)
    }
    
    render(){
        return (
            <Fragment>
                <TableComponent onRef={this.getChildRef} batchButton={true} config={this.state.tableConfig} >
                    <Button type="primary" ref="groupAdd" onClick={() => this.groupModal({ status: true })}>创建群组</Button>
                </TableComponent>
                <GroupModal onRef={this.getGroupModalRef} />
            </Fragment>
        )
    }
}

export default GroupList